<script>
export default {
  name: "index",
  data() {
    return {
      form: {
        originTime: '',
        addTime: '',
        isDouble: '',
      },
      hour: ''
    }
  },
  methods: {
    close() {
      this.$router.push('/')
    },
    onSubmit() {
      let hour = Number(this.form.originTime)
      let num = Number(this.form.addTime)
      let flag = this.form.isDouble ? 2 : 1
      let addHour = num * 3 * flag / 60 / 60
      this.hour = (hour + addHour).toFixed(2)
    }
  }
}
</script>

<template>
  <div class="add-time">
    <img class="back" src="../../assets/back.png" @click="close"/>
    <div class="content">
      <el-form ref="form" :model="form" label-width="80px" size="mini">
        <el-form-item label="原时长">
          <el-input v-model="form.originTime">
            <template slot="append">小时</template>
          </el-input>
        </el-form-item>
        <el-form-item label="票数">
          <el-input v-model="form.addTime">
            <template slot="append">票</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否双倍">
          <el-checkbox v-model="form.isDouble"></el-checkbox>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit">计算</el-button>
        </el-form-item>
      </el-form>
      <div class="hour">
        <h1>{{ hour }}</h1>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.add-time {
  height: 100%;
  width: 100%;
  background: url("../../assets/bg5.jpg") no-repeat;
  background-size: cover;

  .hour {
    text-align: center;
    color: #f67953;
  }

  .back {
    position: absolute;
    top: 20px;
    right: 15px;
    height: 37px;
    cursor: pointer;
  }

  .content {
    width: 50%;
    margin: 0 auto;
    padding: 40px 0;
  }
}
</style>